<template>
<div v-loading="loading" class="home-container" @wheel="hanlerRolling " ref="container" >
  <!-- 所谓的改变页面切换就是用到了margin-top，计算完之后直接就在模板中:style=中重新赋值。 -->
 <ul  class="carouse-container" :style="{ marginTop:getMarginTop}"  @transitionend="hanlerTionend">
<li  v-for="item in data" :key="item.id" > 
<Carouselitem :resources="item"></Carouselitem>
</li>
</ul>
<!-- v-show 在这个位置比v-if更加稳定，效果更好，这样操作也能避免index的值小于零，或者大于数组最大值出现空白页面， -->
<div  v-show="index>=1"  class="icon iconup" @click="switcTo(index-1)">
  <Icon type="arrowUp" ></Icon>
</div>
<div  v-show="index<data.length-1" class="icon icondown" @click="switcTo(index+1)">
  <Icon type="arrowDown" ></Icon>
</div> 
<ul class="indicator-container">
  <li v-for="(item,i) in data" :key="item.id" class="indicator" @click="switcTo(i)" :class="{ active:i===index}"></li>
</ul>
</div>
</template>
<script>
// import {getBanner}from "../../api/banner.js";
import Carouselitem from "./Carouselitem.vue";
import Icon from "../../components/Icon";
// import fetchData from "../../mixins/fetchData"
import { mapState } from "vuex";
export default {
  // mixins:[fetchData([])],
    data() {
        return {
          index:0,//当前页码
          containerHeight:0,//获取的页面高度
          ispage:false,
        };
    },
    created(){
      this.$store.dispatch('banner/fetchBanner');
    },
    computed:{
      ...mapState('banner',['loading','data']),
   getMarginTop(){//计算函数。计算每个页面所需要的margin-top值。这个值是ul的值，
   return -this.index*this.containerHeight+"px"; //别忘了拼接px单位
 },
    },
   
    // methods:{
    //   hanlder(){
    //   this.$showMessage({
    //   content:"我是笨蛋",
    //   type:"info",
    //   callback:function(){
    //     console.log("大功告成")
    //   },
    //   // container:this.$refs.test,
    // })
    //   }
    // }

    components: { Carouselitem, Icon },
  mounted(){//挂载之后才可以设置到真实dom的宽高 钩子函数mounted 挂载后
     this.containerHeight=this.$refs.container.clientHeight;
      //  console.log(this.containerHeight);
      window.addEventListener('resize',this.showResize);
    },
    destroyed(){
     window.removeEventListener('resize',this.showResize);
    },
      methods:{
        // async fetchData(){
        //   return await getBanner();
        // },
    switcTo(i){//跳转函数。传入要跳转的值。也就是重新给index赋值，这样就会重新计算渲染页面
      this.index=i;
      },
    hanlerRolling(e){
          if(this.ispage){
            return
          };
      // console.log("触发了")
          if(e.deltaY<-10&&this.index>0){
          this.ispage=true;
          this.index--;
          };
          if(e.deltaY>10&&this.index<this.data.length-1){
          this.ispage=true;
          this.index++;
          }
      },
      hanlerTionend(){
        this.ispage=false;
      },
    showResize(){
     this.containerHeight=this.$refs.container.clientHeight;
    //  console.log('页面变化')
     }
      },

      }

</script>

<style lang="less" scoped>
@import "../../style/general.less";
@import "../../style/var.less";
.home-container{
  width: 100%;
  height: 100%;
  position:relative;
  overflow: hidden;
  // 测试
  // width: 70%;
  // height: 30%;
  // border: 1px solid #FFF;
  // overflow: visible;
  // margin: 100px auto;
 .carouse-container{
   width: 100%;
   height: 100%;
   transition: 0.5s;
   
   li{
     width: 100%;
     height: 100%;
   }
 }
   ul{
       margin: 0;
       padding: 0;
     }li{
    list-style: none; 
  }
  .icon{
    .self-center();
    transform: translateX(-50%);
    font-size: 20px;
  color: @lightWords;
  cursor: pointer;
  }
  @gap:15px;
  .iconup{
    top:@gap;
    animation: jump-up  2s infinite;
   
  }
  .icondown{
    top:auto;
  bottom: @gap;
  animation: jump-down  2s infinite;
  }
  @jump:7px;
  @keyframes jump-up { 
    0%{
  transform:translate( -50%,@jump);
    }
50%{
  transform:translate( -50%,-@jump);

}
100%{
  transform:translate( -50%,@jump);

}
  }
  @keyframes jump-down { 
    0%{
  transform:translate( -50%,-@jump);
    }
50%{
  transform:translate( -50%,@jump);

}
100%{
  transform:translate( -50%,-@jump);

}
  }
  .indicator-container{
    .self-center();
    transform: translateY(-50%);
    left:auto;
    right: 15px;
    cursor: pointer;
    
    li{
width: 7px;
height: 7px;
background:@words ;
border-radius: 50%;
margin:10px 0;
border: 1px solid #fff;

&.active{
  background: #fff;
}
    }
  }
}
</style>